<template>
    <div class="app-container">
        <div class="header">
            <el-button type="primary" size="mini" @click="showSaveCourse">添加</el-button>
            <el-input style="width: 300px; margin-left: 100px;" size="mini" placeholder="输入关键字搜索"
                v-model="courseListForm.mimo" @change="courseSearch" @input="checkVal">
                <i slot="suffix" class="el-icon-search"></i>
            </el-input>
        </div>

        <!-- 添加课程弹出框 -->
        <el-dialog title="添加课程" :visible.sync="showSaveCourseForm" :close-on-click-modal="false"
            @close="closeSaveCourseForm">
            <el-form ref="saveCourseForm" :model="saveCourseForm" label-width="110px" :rules="saveCourseRules">
                <el-form-item label="课程名称" prop="name">
                    <el-input v-model="saveCourseForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年级" prop="grade">
                    <el-input v-model="saveCourseForm.grade"></el-input>
                </el-form-item>
                <el-form-item label="星期几" prop="day" :rules="checkSelectDayId">
                    <el-select v-model="selectSaveCourseDayIdForm.name" placeholder="请选择" popper-class="blueSecoend"
                        :popper-append-to-body="false" value-key="id" @change="selectSaveCourseDayId">
                        <el-option v-for="item in dayArr" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始周" :rules="checkSelectStartWeekId" prop="weekStart">
                    <el-select v-model="selectSaveCourseStartWeekIdForm.name" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="id"
                        @change="selectSaveCourseStartWeekId">
                        <el-option v-for="item in weekList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结束周" :rules="checkSelectEndWeekId" prop="weekEnd">
                    <el-select v-model="selectSaveCourseEndWeekIdForm.name" placeholder="请选择" popper-class="blueSecoend"
                        :popper-append-to-body="false" value-key="id" @change="selectSaveCourseEndWeekId">
                        <el-option v-for="item in weekList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="第几节课开始" :rules="checkSelectStartClassId" prop="timeStart">
                    <el-select v-model="selectSaveCourseStartClassIdForm.name" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="id"
                        @change="selectSaveCourseStartClassId">
                        <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item prop="timeEnd">
                <el-form-item label="第几节课结束" :rules="checkSelectEndClassId" prop="timeEnd">
                    <el-select v-model="selectSaveCourseEndClassIdForm.name" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="id"
                        @change="selectSaveCourseEndClassId">
                        <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课地点" prop="address">
                    <el-input v-model="saveCourseForm.address"></el-input>
                </el-form-item>
                <el-form-item label="课程老师" prop="teacher">
                    <el-input v-model="saveCourseForm.teacher"></el-input>
                </el-form-item>
                <el-form-item label="选择学期" :rules="checkSelectSemesterId" prop="semesterId">
                    <el-select v-model="selectSaveCourseSemesterIdForm.semesterMessage" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="semesterId"
                        @change="selectSaveCourseSemestersId">
                        <el-option v-for="item in semesterList" :key="item.semesterId" :label="item.semesterMessage"
                            :value="item">
                            {{ item.semesterMessage }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="scope">
                        <el-button type="primary" @click="saveCourseData" :loading="loading">提交</el-button>
                        <el-button @click="closeSaveCourseForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改课程弹出框 -->
        <el-dialog title="修改课程" :visible.sync="showEditCourseForm" :close-on-click-modal="false"
            @close="closeEditCourseForm">
            <el-form ref="editCourseForm" :model="editCourseForm" label-width="110px" :rules="editCourseRules">
                <el-form-item label="课程名称" prop="courseName">
                    <el-input v-model="editCourseForm.courseName"></el-input>
                </el-form-item>
                <el-form-item label="年级" prop="grade">
                    <el-input v-model="editCourseForm.grade"></el-input>
                </el-form-item>
                <el-form-item label="星期几" prop="courseDay" :rules="checkSelectDayId">
                    <el-select v-model="selectSaveCourseDayIdForm.name" placeholder="请选择" popper-class="blueSecoend"
                        :popper-append-to-body="false" value-key="id" @change="selectSaveCourseDayId">
                        <el-option v-for="item in dayArr" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始周" :rules="checkSelectStartWeekId" prop="courseWeekStart">
                    <el-select v-model="selectSaveCourseStartWeekIdForm.name" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="id"
                        @change="selectSaveCourseStartWeekId">
                        <el-option v-for="item in weekList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结束周" :rules="checkSelectEndWeekId" prop="courseWeekEnd">
                    <el-select v-model="selectSaveCourseEndWeekIdForm.name" placeholder="请选择" popper-class="blueSecoend"
                        :popper-append-to-body="false" value-key="id" @change="selectSaveCourseEndWeekId">
                        <el-option v-for="item in weekList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="第几节课开始" :rules="checkSelectStartClassId" prop="courseTimeStart">
                    <el-select v-model="selectSaveCourseStartClassIdForm.name" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="id"
                        @change="selectSaveCourseStartClassId">
                        <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item prop="courseTimeEnd">
                <el-form-item label="第几节课结束" :rules="checkSelectEndClassId" prop="timeEnd">
                    <el-select v-model="selectSaveCourseEndClassIdForm.name" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="id"
                        @change="selectSaveCourseEndClassId">
                        <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课地点" prop="courseAddress">
                    <el-input v-model="editCourseForm.courseAddress"></el-input>
                </el-form-item>
                <el-form-item label="课程老师" prop="courseTeacher">
                    <el-input v-model="editCourseForm.courseTeacher"></el-input>
                </el-form-item>
                <el-form-item label="选择学期" :rules="checkSelectSemesterId" prop="semesterId">
                    <el-select v-model="selectSaveCourseSemesterIdForm.semesterMessage" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="semesterId"
                        @change="selectSaveCourseSemestersId">
                        <el-option v-for="item in semesterList" :key="item.semesterId" :label="item.semesterMessage"
                            :value="item">
                            {{ item.semesterMessage }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editCourseData" :loading="loading">提交</el-button>
                        <el-button @click="closeEditCourseForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <div class="content">
            <el-table :data="courseList" style="width: 100%;" stripe>
                <el-table-column label="课程信息">
                    <el-table-column label="课程名称" prop="courseName">
                        <template slot-scope="scope">
                            <div>{{ scope.row.courseName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="年级" prop="grade">
                        <template slot-scope="scope">
                            <div>{{ scope.row.grade }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期几" prop="courseDay">
                        <template slot-scope="scope">
                            <div>星期{{ numToChinese(scope.row.courseDay) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="开始周次" prop="courseWeekStart">
                        <template slot-scope="scope">
                            <div>第{{ scope.row.courseWeekStart }}周</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="结束周次" prop="courseWeekEnd">
                        <template slot-scope="scope">
                            <div>第{{ scope.row.courseWeekEnd }}周</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="上课地点" prop="courseAddress">
                        <template slot-scope="scope">
                            <div>{{ scope.row.courseAddress }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="教师" prop="courseTeacher">
                        <template slot-scope="scope">
                            <div>{{ scope.row.courseTeacher }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="开始节次" prop="courseTimeStart">
                        <template slot-scope="scope">
                            <div>第{{ scope.row.courseTimeStart }}节</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="结束节次" prop="courseTimeEnd">
                        <template slot-scope="scope">
                            <div>第{{ scope.row.courseTimeEnd }}节</div>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="操作">
                    <el-table-column label="修改">
                        <template slot-scope="scope">
                            <el-button type="primary" circle icon="el-icon-edit"
                                @click="showEditCourse(scope.row.courseId)"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="删除">
                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete"
                                @click="delCourse(scope.row.courseId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="courseListSizeChange" @current-change="courseListCurrentChange"
                :page-size="courseListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
                :total="courseListTotal" style="margin-top: 20px;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { getCourseList, saveCourse, getUpdateCourseInfo, editCourse, deleteCourse, getAllSemesterListBySelect } from '../../api/api'
import { Message } from 'element-ui'
export default {
    data() {
        return {
            loading: false,
            semesterList: [],
            showSaveCourseForm: false,
            courseList: [],
            courseListTotal: null,
            courseListForm: {
                page: 1,
                size: 10,
                mimo: ''
            },
            showSaveCourseForm: false,
            saveCourseForm: {
                name: '',
                day: null,
                weekStart: null,
                weekEnd: '',
                timeStart: null,
                timeEnd: null,
                address: '',
                teacher: '',
                semesterId: null,
                grade: ''
            },
            checkSelectSemesterId: [{
                required: true,
                message: '请选择学期',
                validator: this.courseSemesterIdValidator
            }],
            checkSelectDayId: [{
                required: true,
                message: '请选择星期几',
                validator: this.courseDayIdValidator
            }],
            checkSelectStartWeekId: [{
                required: true,
                message: '请选择开始周',
                validator: this.courseStartWeekIdValidator
            }],
            checkSelectEndWeekId: [{
                required: true,
                message: '请选择结束周',
                validator: this.courseEndWeekIdValidator
            }],
            checkSelectStartClassId: [{
                required: true,
                message: '请选择开始课次',
                validator: this.courseStartClassIdValidator
            }],
            checkSelectEndClassId: [{
                required: true,
                message: '请选择结束课次',
                validator: this.courseEndClassIdValidator
            }],
            saveCourseRules: {
                name: [
                    { required: true, message: '请输入课程名称', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'change' }
                ],
                teacher: [
                    { required: true, message: '请输入教师名字', trigger: ['blur', 'change'] }
                ],
                grade: [
                    { required: true, message: '请输入年级', trigger: 'change' },
                ]
            },
            showEditCourseForm: false,
            editCourseForm: {
                courseId: null,
                courseName: '',
                courseDay: null,
                courseWeekStart: null,
                courseWeekEnd: '',
                courseTimeStart: null,
                courseTimeEnd: null,
                courseAddress: '',
                courseTeacher: '',
                semesterId: null,
                grade: '',
            },
            editCourseRules: {
                courseName: [
                    { required: true, message: '请输入课程名称', trigger: 'change' }
                ],
                courseAddress: [
                    { required: true, message: '请输入地址', trigger: 'change' }
                ],
                courseTeacher: [
                    { required: true, message: '请输入教师名字', trigger: ['blur', 'change'] }
                ],
                grade: [
                    { required: true, message: '请输入年级', trigger: 'change' },
                ]
            },
            selectSaveCourseDayIdForm: {
                name: ''
            },
            selectSaveCourseStartWeekIdForm: {
                name: ''
            },
            selectSaveCourseEndWeekIdForm: {
                name: ''
            },
            selectSaveCourseStartClassIdForm: {
                name: ''
            },
            selectSaveCourseEndClassIdForm: {
                name: ''
            },
            selectSaveCourseSemesterIdForm: {
                semesterMessage: ''
            },
            selectGetCourseListWeekIdForm: {
                name: ''
            },
            selectGetCourseListSemesterIdForm: {
                semesterMessage: ''
            },
            dayArr: [
                { id: 1, name: '星期一' }, { id: 2, name: '星期二' }, { id: 3, name: '星期三' }, { id: 4, name: '星期四' }, { id: 5, name: '星期五' }, { id: 6, name: '星期六' }, { id: 7, name: '星期日' },
            ],
            weekList: [
                { id: 1, name: '第1周' }, { id: 2, name: '第2周' }, { id: 3, name: '第3周' }, { id: 4, name: '第4周' }, { id: 5, name: '第5周' }, { id: 6, name: '第6周' }, { id: 7, name: '第7周' }, { id: 8, name: '第8周' }, { id: 9, name: '第9周' }, { id: 10, name: '第10周' }, { id: 11, name: '第11周' }, { id: 12, name: '第12周' }, { id: 13, name: '第13周' }, { id: 14, name: '第14周' }, { id: 15, name: '第15周' }, { id: 16, name: '第16周' }, { id: 17, name: '第17周' }, { id: 18, name: '第18周' }, { id: 19, name: '第19周' }, { id: 20, name: '第20周' }
            ],
            classList: [
                { id: 1, name: '第1节' }, { id: 2, name: '第2节' }, { id: 3, name: '第3节' }, { id: 4, name: '第4节' }, { id: 5, name: '第5节' }, { id: 6, name: '第6节' }, { id: 7, name: '第7节' }, { id: 8, name: '第8节' }, { id: 9, name: '第9节' }, { id: 10, name: '第10节' }, { id: 11, name: '第11节' }, { id: 12, name: '第12节' }
            ],
        }
    },
    methods: {
        courseSemesterIdValidator(rule, value, callback) {
            if (this.selectSaveCourseSemesterIdForm.semesterMessage === '') {
                callback(new Error('请选择学期'))
            } else {
                callback()
            }
        },
        courseDayIdValidator(rule, value, callback) {
            if (this.selectSaveCourseDayIdForm.name === '') {
                callback(new Error('请选择星期几'))
            } else {
                callback()
            }
        },
        courseStartWeekIdValidator(rule, value, callback) {
            if (this.selectSaveCourseStartWeekIdForm.name === '') {
                callback(new Error('请选择开始周'))
            } else {
                callback()
            }
        },
        courseEndWeekIdValidator(rule, value, callback) {
            if (this.selectSaveCourseEndWeekIdForm.name === '') {
                callback(new Error('请选择结束周'))
            } else {
                callback()
            }
        },
        courseStartClassIdValidator(rule, value, callback) {
            if (this.selectSaveCourseStartClassIdForm.name === '') {
                callback(new Error('请选择开始课次'))
            } else {
                callback()
            }
        },
        courseEndClassIdValidator(rule, value, callback) {
            if (this.selectSaveCourseEndClassIdForm.name === '') {
                callback(new Error('请选择结束课次'))
            } else {
                callback()
            }
        },
        getAllSemesterListData() {
            getAllSemesterListBySelect().then((res) => {
                if (res.code == 200) {
                    console.log('全部学期列表', res)
                    this.semesterList = res.data
                }
            })
        },
        getCourseListData() {
            getCourseList(this.courseListForm).then((res) => {
                if (res.code == 200) {
                    console.log('课程列表', res)
                    this.courseList = res.data.data
                    this.courseListTotal = res.data.total
                }
            })
        },
        // 搜索
        courseSearch() {
            this.getCourseListData()
        },
        // 如果搜索框的值为空，刷新一下课程列表
        checkVal() {
            if (this.courseListForm.mimo == '') {
                this.getCourseListData()
            }
        },
        // 列表，当每页条数切换时
        courseListSizeChange(e) {
            this.courseListForm.size = e
            this.getCourseListData()
        },
        // 列表，当当前页码改变时
        courseListCurrentChange(e) {
            this.courseListForm.page = e
            this.getCourseListData()
        },
        selectSaveCourseDayId(e) {
            this.selectSaveCourseDayIdForm.name = e.name
            this.saveCourseForm.day = e.id
            this.editCourseForm.courseDay = e.id
        },
        selectSaveCourseStartWeekId(e) {
            this.selectSaveCourseStartWeekIdForm.name = e.name
            this.saveCourseForm.weekStart = e.id
            this.editCourseForm.courseWeekStart = e.id
        },
        selectSaveCourseEndWeekId(e) {
            this.selectSaveCourseEndWeekIdForm.name = e.name
            this.saveCourseForm.weekEnd = e.id
            this.editCourseForm.courseWeekEnd = e.id
        },
        selectSaveCourseStartClassId(e) {
            this.selectSaveCourseStartClassIdForm.name = e.name
            this.saveCourseForm.timeStart = e.id
            this.editCourseForm.courseTimeStart = e.id
        },
        selectSaveCourseEndClassId(e) {
            this.selectSaveCourseEndClassIdForm.name = e.name
            this.saveCourseForm.timeEnd = e.id
            this.editCourseForm.courseTimeEnd = e.id
        },
        selectSaveCourseSemestersId(e) {
            this.selectSaveCourseSemesterIdForm.semesterMessage = e.semesterMessage
            this.saveCourseForm.semesterId = e.semesterId
            this.editCourseForm.semesterId = e.semesterId
        },

        selectGetCourseListWeekId(e) {
            this.courseListForm.week = e.id
            this.selectGetCourseListWeekIdForm.name = e.name
            this.getAllSemesterListData()
            this.getCourseListData()
        },
        selectGetCourseListSemesterId(e) {
            this.courseListForm.semesterId = e.semesterId
            this.selectGetCourseListSemesterIdForm.semesterMessage = e.semesterMessage
            this.getCourseListData()
        },
        // 将汉字转换成阿拉伯数字
        numToChinese(num) {
            const chars = ['', '一', '二', '三', '四', '五', '六', '七'];
            const txt = [];
            let unit = 0;

            while (num >= 1) {
                const remain = num % 10;
                const tenTime = Math.floor(num / 10);

                txt.push(chars[remain]);
                num = tenTime;
                unit++;
            }

            return txt.reverse().join('');
        },
        saveCourseData() {
            this.$refs.saveCourseForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单',
                        type: 'warning',
                        duration: 2000,
                    })
                    return false
                } else {
                    if (this.saveCourseForm.weekStart > this.saveCourseForm.weekEnd) {
                        Message({
                            message: '结束周不能早于开始周',
                            type: 'warning',
                            duration: 2000,
                        })
                        return
                    }
                    if (this.saveCourseForm.timeStart > this.saveCourseForm.timeEnd) {
                        Message({
                            message: '结束课次不能早于开始课次',
                            type: 'warning',
                            duration: 2000,
                        })
                        return
                    }
                    console.log(JSON.stringify(this.saveCourseForm))
                    saveCourse(this.saveCourseForm).then((res) => {
                        if (res.code == 200) {
                            console.log('添加课程', res)
                            Message({
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.loading = true
                            this.getCourseListData()
                            setTimeout(() => {
                                this.showSaveCourseForm = false
                                this.loading = false
                                this.$nextTick(() => {
                                    this.$refs.saveCourseForm.resetFields()
                                    this.$set(this.selectSaveCourseDayIdForm, 'name', '')
                                    this.$set(this.selectSaveCourseStartWeekIdForm, 'name', '')
                                    this.$set(this.selectSaveCourseEndWeekIdForm, 'name', '')
                                    this.$set(this.selectSaveCourseStartClassIdForm, 'name', '')
                                    this.$set(this.selectSaveCourseEndClassIdForm, 'name', '')
                                    this.$set(this.selectSaveCourseSemesterIdForm, 'semesterMessage', '')
                                })
                            }, 1500)
                        } else {
                            Message({
                                message: '添加失败',
                                type: 'warning',
                                duration: 2000
                            })
                        }
                    })
                }
            })
        },
        showSaveCourse() {
            this.showSaveCourseForm = true
            this.getAllSemesterListData()
        },
        closeSaveCourseForm() {
            this.$nextTick(() => {
                this.$refs.saveCourseForm.resetFields()
                this.$set(this.selectSaveCourseDayIdForm, 'name', '')
                this.$set(this.selectSaveCourseStartWeekIdForm, 'name', '')
                this.$set(this.selectSaveCourseEndWeekIdForm, 'name', '')
                this.$set(this.selectSaveCourseStartClassIdForm, 'name', '')
                this.$set(this.selectSaveCourseEndClassIdForm, 'name', '')
                this.$set(this.selectSaveCourseSemesterIdForm, 'semesterMessage', '')
            })
            this.showSaveCourseForm = false
        },
        closeEditCourseForm() {
            this.showEditCourseForm = false
            this.$nextTick(() => {
                this.$refs.saveCourseForm.resetFields()
                this.$set(this.selectSaveCourseDayIdForm, 'name', '')
                this.$set(this.selectSaveCourseStartWeekIdForm, 'name', '')
                this.$set(this.selectSaveCourseEndWeekIdForm, 'name', '')
                this.$set(this.selectSaveCourseStartClassIdForm, 'name', '')
                this.$set(this.selectSaveCourseEndClassIdForm, 'name', '')
                this.$set(this.selectSaveCourseSemesterIdForm, 'semesterMessage', '')
            })
        },
        showEditCourse(courseId) {
            this.getAllSemesterListData()
            this.showEditCourseForm = true
            this.editCourseForm.courseId = courseId
            let data = {
                courseId
            }
            getUpdateCourseInfo(data).then((res) => {
                if (res.code == 200) {
                    console.log('修改课程（数据回显）', res)
                    this.editCourseForm.courseName = res.data.courseName
                    this.editCourseForm.grade = res.data.grade
                    this.selectSaveCourseDayIdForm.name = res.data.courseDay
                    this.selectSaveCourseStartWeekIdForm.name = res.data.courseWeekStart
                    this.selectSaveCourseEndWeekIdForm.name = res.data.courseWeekEnd
                    this.selectSaveCourseStartClassIdForm.name = res.data.courseTimeStart
                    this.selectSaveCourseEndClassIdForm.name = res.data.courseTimeEnd
                    this.selectSaveCourseSemesterIdForm.semesterMessage = res.data.semesterId
                    this.editCourseForm.courseTeacher = res.data.courseTeacher
                    this.editCourseForm.courseAddress = res.data.courseAddress
                }
            })

        },

        editCourseData() {
            console.log(JSON.stringify(this.editCourseForm))
            editCourse(this.editCourseForm).then((res) => {
                if (res.code == 200) {
                    Message({
                        message: '修改成功',
                        type: 'success',
                        duration: 3000
                    })
                    console.log('修改课程', res)
                    this.loading = true
                    setTimeout(() => {
                        this.showEditCourseForm = false
                        this.loading = false
                        this.getCourseListData()
                    }, 2000)

                } else {
                    Message(({
                        message: '修改失败',
                        type: 'success',
                        duration: 2000
                    }))
                }
            })
        },
        delCourse(courseId) {
            let obj = {
                courseId,
            }
            this.$confirm('是否删除该课程?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteCourse(obj).then((res) => {
                    if (res.code == 200) {
                        console.log('删除成功', res);
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            duration: 3000
                        })
                        this.getCourseListData()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败',
                            duration: 3000
                        })
                    }
                })
            }).catch(() => {
            })
        },
    },
    created() {
        utils.checkLogin()
        this.getCourseListData()
    }
}
</script>

<style lang="less" scoped>
.app-container {
    padding: 40px;

    .header {
        align-items: center;
        display: flex;
        margin-bottom: 20px;

        .el-icon-search {
            cursor: pointer;
            margin-right: 4px;
            margin-top: 8px;
        }

    }

    .blueBack {
        .el-select-dropdown__item {
            height: 120px;
        }
    }

    .blueSecoend {
        .el-select-dropdown__item {
            height: 36px;
        }
    }

    .redBack {
        .el-select-dropdown__item {
            height: 100%;
        }
    }

    .redSecoend {
        .el-select-dropdown__item {
            height: 36px;
        }
    }


    .content {
        text-align: center;

        .el-select-dropdown__item {
            height: auto;
        }
    }
}
</style>